<!DOCTYPE html>
<html class="x-admin-sm">
    
    <head>
        <meta charset="UTF-8">
        <title>教师页面</title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8" />
        <link rel="stylesheet" href="./css/font.css">
        <link rel="stylesheet" href="./css/xadmin.css">
        <link href="js/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"/>
        <script src="./lib/layui/layui.js" charset="utf-8"></script>
        <script type="text/javascript" src="./js/xadmin.js"></script>
        <link rel="stylesheet" href="css/global.css"/>
        <script type="text/javascript" src="js/jquery.min.js" ></script>
        <script type="text/javascript" src="js/jquery.cookie.js"></script>
           <style>
           	table{  
                width:100px;  
                table-layout:fixed;/* 只有定义了表格的布局算法为fixed，下面td的定义才能起作用。 */  
           }  
              td{  
                 width:100%;  
                 word-break:keep-all;/* 不换行 */  
                 white-space:nowrap;/* 不换行 */  
                 overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */  
                 text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用*/  
         }  
         
           </style>
    </head>
    <body>
        <div class="x-nav">
            <span class="layui-breadcrumb">
                <a href="">首页</a>
                <a href="">演示</a>
                <a>
                    <cite>导航元素</cite></a>
            </span>
            <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" onclick="location.reload()" title="刷新">
                <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i>
            </a>
        </div>
        <div class="layui-fluid">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md12">
                    <div class="layui-card" id="saveTr">
                        <div class="layui-card-body ">
                            <form class="layui-form layui-col-space5" >
                                <div class="layui-input-inline layui-show-xs-block">
                                    <input class="layui-input" placeholder="开始添加时间" name="start" autocomplete="off"  id="start"></div>
                                <div class="layui-input-inline layui-show-xs-block">
                                    <input class="layui-input" placeholder="结束添加时间" name="end" autocomplete="off"  id="end"></div>
                                <div class="layui-input-inline layui-show-xs-block">
                                    <select name="contrller" id="isStarl" >
                                        <option value="-1">请选择</option>
                                       <option value="2">首席讲师</option>
			    		                <option value="1">高级讲师</option>
                                        </select>
                                </div>
                               
                                <div class="layui-input-inline layui-show-xs-block">
                                    <input type="text" name="name"id="namel" placeholder="请输入讲师名称" autocomplete="off" class="layui-input"></div>
                                <div class="layui-input-inline layui-show-xs-block">
                                    <button class="layui-btn" type="button"@click="btn" lay-filter="sreach">
                                        <i class="layui-icon">&#xe615;搜索</i></button>
                                </div>
                                  <div class="layui-input-inline layui-show-xs-block">
                                    <button class="layui-btn-danger layui-btn layui-btn-xs" type="button" href="javascript:;" id="btn"><i class="layui-icon"></i>清空</button>
                                </div>
                            </form>
                        </div>
                        <div class="layui-card-header">
                            <button class="layui-btn"  onclick="xadmin.open('添加用户','./teacher-add.html',800,600)">
                                <i class="layui-icon"></i>添加教师</button></div>
                        <div class="layui-card-body ">
                        	
                            <table class="layui-table layui-form" >
                                <thead>
                                    <tr>
                                       
                                        <th>序列</th>
										<th>名称</th>
										<th>头衔</th>
										<th>资历</th>
										<th>简介</th>
										<th>添加时间</th>
										<th>排序</th>
                                        <th>操作</th></tr>
                                </thead>
                                <tbody>
                                	<tr v-for="(em,index) in eaa">
										<td >{{ em.id }}</td>
										<td>{{ em.name }}</td>
										<td>  
										<p v-if="em.isStar=='1'">高级讲师</p>
                    					<p v-if="em.isStar=='2'">首席讲师</p>
									 	</td> 
										<td onmousemove='info(this)'>{{ em.education }}</td>
										<td onmousemove='info(this)'>{{ em.career }}</td>
										<td>{{ em.createTime }}</td>
										<td>{{ em.sort }}</td>
										 
										<td class="td-manage">                                     
											
												<a title='编辑' @click="edit(em.id)" href='javascript:;'><i class='layui-icon'>&#xe642;</i></a>  
											 <a title='删除' @click="member_del(em.id)" href='javascript:;'> <i class='layui-icon'>&#xe640;</i></a>
											
										</td>
									</tr>

                                </tbody>
                            </table>
                             <div class="paging" id="pageHelper">
							<a href="#" @click="first" title="">首</a>
							<a id="backpage" @click="last" href="#" title="">&lt;</a>
							<a id="nextpage" href="#" @click="next" title="">&gt;</a>
							<a href="#" @click="end" title="">末</a>
								<div class="layui-inline layui-show-xs-block">
									<input type="text" id="num" size="1" style="height: 25px;"  class="layui-input">
								</div> 
								<a href="#" @click="tz" title="">跳转</a>
							 共：<span id="sp">{{this.totalPage}}</span>页
							<div class="clear"></div>
						</div>
                            
                            
                        </div>
                       
                    </div>
                </div>
            </div>
        </div>
        
        
        <script src="js/vue.min.js"></script>
		<script src="js/axios.min.js"></script>
		<script src="js/pageHelp.js"></script>
		
		<script>
			 
			new Vue({
				el: "#saveTr",
				data: {					 
					emai: [],
					eaa:[],
				page: 1, //当前页
				totalPage: 0 //总页数
				},
				methods: {															
			 		edit:function(id){			 			 
			 		$.cookie("id",id);  
                     xadmin.open('编辑','teacher-edit.html',800,600);				
					},
			       member_del:function(id){
			       	 if(confirm("确定要删除吗？")){
                      $.ajax({
									type: "post",
									url: "http://localhost:9095/admin/teacher/delete",
									async: true,
									data: {
										"id": id,
									},
									headers: {
								"token2": $.cookie("token2")
							      },
									success(msg) {
										//$(obj).parent().parent().remove();
										location.reload();
									}
								});
	       }
			       },
			       
			       //首页
					first: function() {
						this.page = 1;
						this.eaa = pageHelp(this.emai, 5, 1);
					},
					//上一页
					last: function() {
						this.page = this.page - 1;
						if(this.page <= 1) {
							layer.msg("已经第一页了")
							this.page=1;
						}
						this.eaa = pageHelp(this.emai, 5, this.page);
					},
					//下一页
					next: function() {
						this.page = this.page + 1;
						console.log(this.page)
						if(this.page >= this.totalPage) {
						layer.msg("已经最后一页了")
							this.page=this.totalPage;
						}
						this.eaa = pageHelp(this.emai, 5, this.page);
					},
					//末页
					end: function() {
						this.page = this.totalPage;
						this.eaa = pageHelp(this.emai, 5, this.totalPage)
					},
					
					//跳转页面
					tz: function() {
						var num=$("#num").val();
						if(num>this.totalPage||num<1){
						layer.msg("请输入正确的页数")	
						$("#num").val("");
						
						}
						this.eaa = pageHelp(this.emai, 5, num)
						$("#num").val("");
					},
			       
					//点击事件，（模糊查询）
					btn() {
						let _this = this;
						var postData = new URLSearchParams();
						postData.append("name", $("#namel").val());
						if ($("#start").val()!=null){
							postData.append("startDate", $("#start").val());
						}
						if ($("#end").val()!=null){
							postData.append("endDate", $("#end").val());
						}
						postData.append("isStar", $("#isStarl option:checked").val());
					 					
						axios({
							method: "get",
							url: "http://localhost:9095/admin/teacher/list",
							headers: {
								'Content-Type': 'application/x-www-form-urlencoded',
									"token2": $.cookie("token2")
							},
							params: postData
						}).then(function(response) {
							console.log(response.data.data);
							_this.emai = response.data.data;
								_this.eaa=_this.emai;
								
							_this.totalPage = Math.ceil(_this.emai.length / 5) //总页数							
						   _this.first();
						});
					}
					
					
					
				},
				created:function() {				  
					let _this = this;
					axios.defaults.headers.common["token2"] = $.cookie("token2");
					axios.get("http://localhost:9095/admin/teacher/list").then(function(response) {
						_this.emai = response.data.data;	
						_this.eaa=_this.emai;
						console.log(response.data.data);
						_this.totalPage = Math.ceil(_this.emai.length / 5) //总页数
					  _this.first();
					});
				},				
			})
		</script>
        
        
    </body>
    <script>layui.use(['laydate', 'form'],
        function() {
            var laydate = layui.laydate;

            //执行一个laydate实例
            laydate.render({
                elem: '#start' //指定元素
            });

            //执行一个laydate实例
            laydate.render({
                elem: '#end' //指定元素
            });
            //清空
            $("#btn").click(function(){
					$("#start").val("");
					$("#end").val("");
					$("#namel").val("");
					$("#isStarl").val("-1");
					layui.form.render();
					
             
				});
				
     	          
        });
              
       
         
        //鼠标放上去显示
        function info($this){
               var title=$this.innerText;
               $($this).attr("title",title);

         }



 



    
    </script>

</html>
